<!DOCTYPE html>
<html>
<head>
	<title>Promise animation</title>
	<style>
		.ball{
			width: 40px;
			height: 40px;
			border-radius: 20px;
		}
		.ball1{
			background-color: red;
		}
		.ball2{
			background-color: green;
		}
		.ball3{
			background-color: blue;
		}
	</style>
</head>
<body>
	<div class="ball ball1" style="margin-left: 0;"></div>
	<div class="ball ball2" style="margin-left: 0;"></div>
	<div class="ball ball3" style="margin-left: 0;"></div>										
</body>
<script type="text/javascript" src="./node_modules/bluebird/js/browser/bluebird.js"></script>
<script>
window.onload = function () {
	var ball1 = document.querySelector('.ball1')
	var ball2 = document.querySelector('.ball2')
	var ball3 = document.querySelector('.ball3')

	function animate(ball,distance,callback) {
		setTimeout(function () {
			var marginLeft = parseInt(ball.style.marginLeft, 10)
			if (marginLeft === distance) {
				callback && callback()
			}
			else{
				if (marginLeft < distance) {
					marginLeft++
				}
				else{
					marginLeft--
				}
				ball.style.marginLeft = marginLeft + 'px'
				animate(ball,distance,callback)
			}
		}, 13)
	}
	// animate(ball1,100,function () {
	// 	animate(ball2,200,function () {
	// 		animate(ball3,300,function () {
	// 			animate(ball3,150,function () {
	// 				animate(ball2,150,function () {
	// 					animate(ball1,150,function () {
							
	// 					})
	// 				})
	// 			})
	// 		})
	// 	})
	// })

	var Promise = window.Promise

	function promiseAnimate(ball,distance) {
		return new Promise(function (resolve,reject) {
			var ball1 = document.querySelector('.ball1')
			var ball2 = document.querySelector('.ball2')
			var ball3 = document.querySelector('.ball3')

			function _animate() {
				setTimeout(function () {
					var marginLeft = parseInt(ball.style.marginLeft, 10)
					if (marginLeft === distance) {
						resolve()
					}
					else{
						if (marginLeft < distance) {
							marginLeft++
						}
						else{
							marginLeft--
						}
						ball.style.marginLeft = marginLeft + 'px'
						_animate()
					}
				}, 13)
			}
			_animate()
		})
	}
	promiseAnimate(ball1,100)
		.then(function () {
			return promiseAnimate(ball2,200)
		})
		.then(function () {
			return promiseAnimate(ball3,300)
		})
		.then(function () {
			return promiseAnimate(ball3,150)
		})
		.then(function () {
			return promiseAnimate(ball2,150)
		})
		.then(function () {
			return promiseAnimate(ball1,150)
		})

}
</script>
</html>